<template>
  <div class='add-form'>
    <el-dialog :title="text+pageTitle"
               :visible.sync="dialogFormVisible"
               width="30%">
      <!-- 内容主体区域 -->
      <el-form ref="dataForm"
               :rules="ruleInline"
               :model="formBase"
               label-width="90px">
        <el-form-item label="学科名称"
                      prop="subjectName">
          <el-input v-model="formBase.subjectName"></el-input>
        </el-form-item>
        <el-form-item label="是否显示"
                      prop="isFrontDisplay">
          <el-switch v-model="state"
                     active-color="#13ce66"
                     inactive-color="#ff4949">
          </el-switch>

        </el-form-item>
      </el-form>
      <!-- 按钮 -->
      <div slot="footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary"
                   @click="createData">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import { add as subjectsAdd, update as subjectsUpdate } from '@/api/hmmm/subjects'

export default {
  name: 'subjectsAdd',
  props: [
    'text',
    'pageTitle',
    'formBase',
    'ruleInline'
  ],
  data () {
    return {
      state: null,
      dialogFormVisible: false
    }
  },
  computed: {},
  methods: {
    // 弹层显示
    dialogFormV () {
      this.state = !!this.formBase.isFrontDisplay
      this.dialogFormVisible = true
    },
    // 弹层隐藏
    dialogFormH () {
      this.dialogFormVisible = false
    },
    // 监听添加/修改对话框的关闭事件
    handleClose () {
      this.$emit('handleCloseModal')
    },

    // 表单提交
    createData () {
      // 对话框表单预校验
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          this.$emit('handleCloseModal')
          this.formBase.isFrontDisplay = this.state ? 1 : 0
          const data = {
            ...this.formBase
          }
          console.log(data)
          if (this.formBase.id) {
            subjectsUpdate(data).then(() => {
              this.$emit('newDataes', this.formBase)
            })
          } else {
            subjectsAdd(this.formBase).then(() => {
              this.$emit('newDataes', this.formBase)
            })
          }
        }
      })
    }
  }
}
</script>

<style scoped lang='less'></style>
